<template>
	<view class="search-box">
		<view class="search">
			<view class="search-input">
				<u-icon class="icon" name="search" color="#D1D1D1" size="40"></u-icon>
				<u-input type="text" v-model="searchKey" :height="72" :placeholder="placeholder" />
			</view>
			<view class="button" @click="search()">搜索</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: ''
			},
		
		},
		name:"search",
		data() {
			return {
				searchKey:'' //搜索关键词
			};
		},
		methods: {
			// 查询
			search:function(){
				this.$emit('searchKey', this.searchKey)
			}
		}
	}
</script>

<style lang="scss">
	.search-box{
		width: 100%;
		padding: $nl-padding-top-main;
		background-color: #FFFFFF;
		position: sticky;
		left: 0;
		// top: 88rpx;
		top: 0;
		z-index: 99;
		.search{
			display: flex;
			align-items: center;
			border-radius: $nl-border-radius-main;
			overflow: hidden;
			background-color: #F3F3F3;
			.search-input{
				flex: 1;
				padding-left: 72rpx;
				height: 72rpx;
				position: relative;
				.icon{
					left: 16rpx;
					top: 16rpx;
					position: absolute;
				}
			}
			
			.button{
				width: 140rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: $uni-font-size-base;
				background-color: $nl-color-main;
				margin-left: 10rpx;
			}
			
			.button:active{
				opacity: 0.9;
			}
		}
	}
</style>
